import * as ol from '../ol'
import 'ol/ol.css';

/**
 * 点要素样式选项
 * @typedef {Object} PointStyleOptions
 * @property {string} [color=bluer] - 填充颜色
 * @property {number} [radius=5] - 半径(可选)
 * @property {string} [image] - 图像路径(可选)
 * @property {number} [strokeWidth=0] - 边框宽度(可选)
 * @property {string} [strokeColor] - 边框颜色(可选)
 */

/**
 * 线要素样式选项
 * @typedef {Object} LineStyleOptions
 * @property {string} [color=bluer] - 线条颜色
 * @property {number} [width=2] - 线条宽度(可选)
 * @property {number} [strokeWidth=0] - 边框宽度(可选)
 * @property {string} [strokeColor] - 边框颜色(可选)
 */

/**
 * 面要素样式选项
 * @typedef {Object} PolygonStyleOptions
 * @property {string} [fillColor=rgba(255, 0, 0, 0.5)] - 填充颜色(可选)
 * @property {string} [strokeColor=blue] - 边线颜色(可选)
 * @property {number} [strokeWidth=2] - 边线宽度(可选)
 */

/**
 * 文本样式选项
 * @typedef {Object} TextStyleOptions
 * @property {string} [text] - 文本内容
 * @property {string} [font=12px Arial] - 字体样式(可选)
 * @property {string} [color=black] - 填充颜色(可选)
 * @property {number} [offsetX=0] - 水平偏移量(可选)
 * @property {number} [offsetY=0] - 垂直偏移量(可选)
 * @property {number} [strokeWidth=0] - 边框宽度(可选)
 * @property {string} [strokeColor] - 边框颜色(可选)
 */
class Style extends ol.style.Style {
    /**
     * 样式类。适用于点、线、面
     * @param {Object} options - 样式选项
     * @property {PointStyleOptions} options.point - 点要素样式选项
     * @property {LineStyleOptions} options.line - 线要素样式选项
     * @property {PolygonStyleOptions} options.polygon - 面要素样式选项
     * @property {TextStyleOptions} options.text - 文本样式选项
     * @example
     * // 创建填充颜色样式的点要素
     * const pointStyleWithColor = new Style({
     *   point: {
     *       color: 'red',
     *   },
     * });
     */
    constructor(options) {
        super();
        /**
         * 默认的点要素样式选项
         * @type {object}
         * @property {string} color - 默认的填充颜色为蓝色
         * @property {number} radius - 默认的半径为 5
         * @property {string} image - 默认的图像为空
         */
        const defaultPointOptions = {
            color: 'blue',
            radius: 5,
            image: null,
        };

        /**
         * 默认的线要素样式选项
         * @type {object}
         * @property {string} color - 默认的线条颜色为蓝色
         * @property {number} width - 默认的线条宽度为 2
         */
        const defaultLineOptions = {
            color: 'blue',
            width: 2,
        };

        /**
         * 默认的面要素样式选项
         * @type {object}
         * @property {string} fillColor - 默认的填充颜色为蓝色，透明度为 0.1
         * @property {string} strokeColor - 默认的边线颜色为蓝色，宽度为 2
         * @property {number} strokeWidth - 默认的边线宽度为 2
         */
        const defaultPolygonOptions = {
            fillColor: 'rgba(0, 0, 255, 0.1)',
            strokeColor: 'blue',
            strokeWidth: 2,
        };

        /**
         * 默认的文本样式选项
         * @type {object}
         * @property {string} text - 默认的文本内容为空
         * @property {string} font - 默认的字体为 Arial，大小为 12px
         * @property {string} color - 默认的填充颜色为黑色
         * @property {number} offsetX - 默认的水平偏移量为 0
         * @property {number} offsetY - 默认的垂直偏移量为 0
         */
        const defaultTextOptions = {
            text: '',
            font: '12px Arial',
            color: 'black',
            offsetX: 0,
            offsetY: 0,
        };

        /**
         * 合并点要素样式选项
         * @type {object}
         */
        const pointOptions = Object.assign({}, defaultPointOptions, options.point);
        /**
         * 合并线要素样式选项
         * @type {object}
         */
        const lineOptions = Object.assign({}, defaultLineOptions, options.line);
        /**
         * 合并面要素样式选项
         * @type {object}
         */
        const polygonOptions = Object.assign({}, defaultPolygonOptions, options.polygon);

        /**
         * 合并文本样式选项
         * @type {object}
         */
        const textOptions = Object.assign({}, defaultTextOptions, options.text);
        if (options.point) this.setPointStyle(pointOptions);
        if (options.line) this.setLineStyle(lineOptions);
        if (options.polygon) this.setPolygonStyle(polygonOptions);
        if (options.text) this.setTextStyle(textOptions);
    }

    // 设置点要素样式 @param {object} pointOptions - 点要素样式选项
    setPointStyle(pointOptions) {
        let pointStyle;
        if (pointOptions.image) {
            pointStyle = new ol.style.Icon({
                src: pointOptions.image,
                scale: pointOptions.radius / 10,
            });
        } else {
            pointStyle = new ol.style.Circle({
                fill: new ol.style.Fill({ color: pointOptions.color }),
                radius: pointOptions.radius,
            });
        }
        this.setImage(pointStyle);
    }

    // 设置线要素样式 @param {object} lineOptions - 线要素样式选项
    setLineStyle(lineOptions) {
        const lineStyle = new ol.style.Stroke({
            color: lineOptions.color,
            width: lineOptions.width,
        });
        this.setStroke(lineStyle);
    }

    // 设置面要素样式 @param {object} polygonOptions - 面要素样式选项
    setPolygonStyle(polygonOptions) {
        let stroke = new ol.style.Stroke({
            color: polygonOptions.strokeColor,
            width: polygonOptions.strokeWidth,
        })
        const polygonStyle = new ol.style.Style({
            fill: new ol.style.Fill({ color: polygonOptions.fillColor }),
            stroke
        });
        this.setFill(polygonStyle.getFill());
        this.setStroke(polygonStyle.getStroke());
    }

    // 设置文本样式 @param {object} textOptions - 文本样式选项
    setTextStyle(textOptions) {
        const textStyle = new ol.style.Text({
            text: textOptions.text,
            font: textOptions.font,
            fill: new ol.style.Fill({ color: textOptions.color }),
            offsetX: textOptions.offsetX,
            offsetY: textOptions.offsetY,
        });
        this.setText(textStyle);
    }
}


export default Style